import React, { useState, useMemo,useCallback } from 'react';
import Header from '@/component/layout/Header/Header';
import TodayStudy from './TodayStudy';
import Tree from './Tree';
import StudaySource from './StudaySource';
import classnames from "classnames";
import './style.less';

let tab = 0;

const Study = (props) => {
  const [tabKey, setTabKey] = useState(tab);
  const tabList = useMemo(()=> {
    return [
      { url: [require('../../assests/img/study0-0.png'), require('../../assests/img/study0-1.png')], name: '目标公园' },
      { url: [require('../../assests/img/study1-0.png'), require('../../assests/img/study1-1.png')], name: '培育小树' },
      { url: [require('../../assests/img/study2-0.png'), require('../../assests/img/study2-1.png')], name: '敬请期待' }
    ]
  },[])
  const changeTab = useCallback((key) => {
    if(tabKey === key) return;
    tab = key;
    setTabKey(key)
  }, [tabKey])
  const ViewList = useMemo(() => {
    let list = [TodayStudy, Tree, StudaySource]
    return list[tabKey]
  },[tabKey])

  return <>
    <Header center={<span>每日一学</span>} />
    <div className="global-content Study-box">
      <div className="study-tab">
        {
          tabList.map((item, index) => {
            return <div className={classnames({'study-tab-item':true,cur:index===tabKey})} onClick={()=>changeTab(index)} key={item.name}>
              <img className={'studyimg'+index} src={item.url[tabKey === index ? 1 : 0]} alt="" />
              <span>{item.name}</span>
            </div>
          })
        }
      </div>
      <ViewList/>
    </div>
  </>

}


export default React.memo(Study)